<!-- DimensionUnificationProgress.vue -->
<template>
  <div class="dimension-unification">
    <div class="panel-header">
      <h2><el-icon><ScaleToOriginal /></el-icon> 量纲统一进度监控</h2>
      <div class="conversion-info">
        <el-tag type="success">GHz → Hz 转换</el-tag>
      </div>
    </div>

    <div class="progress-overview">
      <div class="overview-card">
        <div class="overview-value">{{ conversionRate }}%</div>
        <div class="overview-label">转换完成率</div>
      </div>
      <div class="overview-card">
        <div class="overview-value">{{ processedData }}</div>
        <div class="overview-label">已处理数据</div>
      </div>
      <div class="overview-card">
        <div class="overview-value">{{ remainingData }}</div>
        <div class="overview-label">待处理数据</div>
      </div>
    </div>

    <div class="progress-chart">
      <div ref="progressChart" class="chart-container"></div>
    </div>

    <div class="data-distribution">
      <div class="distribution-header">
        <h3>数据分布情况</h3>
        <el-tag size="small">GHz频段</el-tag>
      </div>
      <div class="distribution-bars">
        <div
            v-for="(item, index) in frequencyDistribution"
            :key="index"
            class="distribution-bar"
            :style="{ height: item.value + '%' }"
        >
          <div class="bar-value">{{ item.value }}%</div>
          <div class="bar-label">{{ item.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import { ScaleToOriginal } from '@element-plus/icons-vue'
import {ElIcon, ElTag} from "element-plus";

const conversionRate = ref(78)
const processedData = ref('1.24M')
const remainingData = ref('346K')

const frequencyDistribution = ref([
  { label: '0.1-1GHz', value: 25 },
  { label: '1-3GHz', value: 42 },
  { label: '3-6GHz', value: 18 },
  { label: '6-10GHz', value: 10 },
  { label: '10+GHz', value: 5 }
])

const progressChart = ref(null)
let chartInstance = null

onMounted(() => {
  initProgressChart()

  onBeforeUnmount(() => {
    if (chartInstance) {
      chartInstance.dispose()
    }
  })
})

const initProgressChart = () => {
  if (progressChart.value) {
    chartInstance = echarts.init(progressChart.value, 'dark')

    const option = {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        formatter: '{b}: {c}%'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        top: '10%'
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLine: { lineStyle: { color: '#5a7cc9' } },
        axisLabel: { color: '#a0bff0' }
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 100,
        axisLine: { show: true, lineStyle: { color: '#5a7cc9' } },
        splitLine: { lineStyle: { color: 'rgba(93, 102, 224, 0.1)' } },
        axisLabel: { color: '#a0bff0' }
      },
      series: [
        {
          name: '转换完成率',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          data: [45, 52, 58, 65, 70, 75, 78],
          lineStyle: {
            width: 3,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#4db8ff' },
              { offset: 1, color: '#9c42ff' }
            ])
          },
          itemStyle: {
            color: '#4db8ff'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(77, 184, 255, 0.3)' },
              { offset: 1, color: 'rgba(156, 66, 255, 0.1)' }
            ])
          },
          markLine: {
            silent: true,
            lineStyle: {
              color: '#ff6b6b',
              type: 'dashed'
            },
            data: [
              {
                yAxis: 78,
                label: {
                  formatter: '当前进度: 78%',
                  position: 'end'
                }
              }
            ]
          }
        }
      ]
    }

    chartInstance.setOption(option)

    // 窗口大小变化时重新调整图表
    window.addEventListener('resize', () => {
      if (chartInstance) chartInstance.resize()
    })
  }
}
</script>

<style scoped>
.dimension-unification {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5vh 1.5vw;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vh;
}

.panel-header h2 {
  font-size: 1.3rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #4db8ff;
}

.progress-overview {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2vh;
}

.overview-card {
  flex: 1;
  background: rgba(20, 30, 60, 0.6);
  border-radius: 8px;
  padding: 1.5vh 0;
  text-align: center;
  border: 1px solid rgba(93, 102, 224, 0.2);
  transition: all 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(93, 102, 224, 0.2);
  border-color: rgba(93, 102, 224, 0.5);
}

.overview-value {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(to bottom, #ffffff, #4db8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5vh;
}

.overview-label {
  font-size: 0.9rem;
  color: #a0bff0;
}

.progress-chart {
  flex: 1;
  height: 25vh;
  margin-bottom: 2vh;
}

.chart-container {
  width: 100%;
  height: 100%;
}

.data-distribution {
  background: rgba(12, 20, 40, 0.5);
  border-radius: 8px;
  padding: 1.5vh 1.5vw;
}

.distribution-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5vh;
}

.distribution-header h3 {
  font-size: 1.05rem;
  margin: 0;
  color: #c0d1ff;
  font-weight: 500;
}

.distribution-bars {
  display: flex;
  height: 10vh;
  gap: 1.5vw;
}

.distribution-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  background: linear-gradient(to top, rgba(77, 184, 255, 0.7), rgba(156, 66, 255, 0.4));
  border-radius: 4px 4px 0 0;
}

.bar-value {
  position: absolute;
  top: -25px;
  width: 100%;
  text-align: center;
  font-size: 0.85rem;
  color: #4db8ff;
}

.bar-label {
  text-align: center;
  padding: 0.5vh 0;
  font-size: 0.8rem;
  color: #a0bff0;
  background: rgba(10, 15, 30, 0.6);
}
</style>